<template>
    <div class="panle carlist">
      <!-- 方框型热卖排列 -->
        <CrossLine></CrossLine>
        <div class="h4" @tap="more()">
            热卖车型报价-TOP12<span style="font-weight:600;position:relative;left:5px;top:1px;color:#999999" class="icon-1"></span>
        </div>
        <div>
            <ul class="cfix">
                <li v-for="(car,index) in activityCars">
                    <div class="box" @tap="goCarDetail(car.carSriesId)">
                        <div class="pic">
                          <img v-if="car.pic !== null" v-lazy="$store.state.appData.imgUrl+car.pic">
                          <img v-else src="static/img/noCarPic.png">
                        </div>
                        <p class="num" style="padding-left:5px;">
                            {{car.carSriesName}}
                        </p>
                        <!-- <span class="btn">热卖</span> -->
                        <div class="bottom cfix">
                          <p class="price" style="padding-left:5px;">
                              <span class="big_left"  v-if="car.guidePrice !== null">{{car.guidePrice}}万起</span>
                              <span class="right"><span style="color:#ff6a27;">{{car.sharesNum}}</span>人在拼单</span>
                              <!-- <span class="right">{{car.sharesNum}}条报价</span> -->
                          </p>
                        </div>
                    </div>                 
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import CrossLine from '@/components/base/cross-line/cross-line'
import { getActivityCars } from '@/nodeApi/filter'
import { getcarModelDetail } from '@/api/carDetail'
  export default {
    data() {
      return {
        activityCars: [],
        obj:{
          carSeriesId:""
        }
      }
    },
    created() {},
    mounted() {
      this.HanderGetActivityCars()
    },
    //注意销毁掉监听，不然报错
    destroyed () {},
    components: {
      CrossLine
    },
    methods: {
      goCarDetail(carSeriesId){
        this.obj.carSeriesId=carSeriesId
        //this.$store.dispatch('updateIsAuth', true)
        getcarModelDetail(this.obj).then(resp => {
          this.$store.commit("GetCarDetails", resp.data) 
          this.$router.push({
              path: "/modelsOffer",
          })
        })
      },
      more(){
        this.$router.push({
            path: '/filter/'
        })
      },
      HanderGetActivityCars() {
        getActivityCars().then(res => {
          this.activityCars = res.data.activityCars
        })
      }
    }
  }

</script>

<style scoped>
  /* 首页车型列表 */
  .carlist {
    padding-bottom: 0rem;
  }
  .panle {
    position: relative;
  }
  .panle:before {
    content: "";
    background-color: #e5e5e5;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    top: 0;
  }
  .panle .h4 {
    font-size:15px;
    padding: .6rem .5rem 0.6rem 0.5rem;
    background-color: #fff;
    margin-bottom:0px!important;
    text-align:center;
    color:#333333;
    border-bottom: 1px solid#f0f0f0; 
  }
  .panle .h4 a.more {
    float: right;
    position: relative;
    padding-right: .5rem;
  }
  .cfix li {
    border-bottom: 1px solid#f0f0f0; 
  }
  .cfix:after {
    content: " ";
    position: absolute;
    right: -10px;
    top: -30px;
    bottom: -60px;
    width: 1px;
    border-right: #f0f0f0 1px solid;
    z-index: 50;
  }
  .carlist {
     background-color:#fff;color:#333333
   }
  .carlist ul {
    overflow:hidden;
  }
  .carlist li {
    width: 50%;
    float: left;
    height:0px;
    padding-bottom:43%;
    position: relative;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    background: #fff;
  }


  .carlist  div.box {
    position: relative;
    background-color:#fff;
    text-align: center;
    margin: 5px 8px 0px 8px;
  }
  .carlist  div.box .pic {
    overflow: hidden;
    margin:0;
    padding:0;
    background-color:#fff;
  }

  .carlist  div.box .pic img {
    width:78%;
    height:78%;
    position: relative;
  }
  
  .carlist  div.box .bottom {
    line-height:1.1rem;
    width: 100%;
    text-align: left;
    font-size: .6rem;
    color:#333333
  }
  .carlist  div.box .bottom p{
    margin:0px;font-size:0.65rem;color:#333333
  }
  .carlist  div.box .bottom p b{
    color:#ff6a27;
  }
  .num{
    text-align: left;
    margin-bottom:0px;
    color:#000000; 
    overflow: hidden;
    line-height: 0.8rem;
    height:  0.8rem;
  }
  .carlist  div.box .top {
    position: absolute;
    top: .16rem;
    left: .16rem;
    text-align: center;
  }

  .carlist  div.text {
    text-align: center;
    padding: .25rem 0 0;
    font-size: .7rem;
    position: absolute;
    top:9px;
    right: .25rem;
  }
  .price .big_left {
    color:#ff6a27;
    font-size:15px;
  }
  .price .right{
    float:right;
    font-size:11px;
    color:#666666;
  }
  .btn{
    width:36px;
    height:18px;
    line-height:18px;
    display: inline-block;
    border:1px solid #ff6a27;
    position: absolute;
    top:5px;
    left:5px;
    color:#ff6a27;
    border-radius: 3px;
    font-size:10px;
  }
  .carlist-top {
      margin-top:86px;
      min-height:0px;
  }
</style>
